<template>
    <el-dialog :title="$t('common.importData')"
               :append-to-body="true"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               :before-close="cancelUpload"
               width="320px">
        <el-button size="small"
                   type="primary"
                   @click="downloadTemplate"
                   style="margin-bottom: 15px"
                    v-show="false">
                    <i class="el-icon-download"></i>
                    {{$t('common.downloadTemplate')}}
        </el-button>
        <el-upload
                ref="upload"
                action=""
                :http-request="uploadFile"
                :file-list="fileList"
                :on-change="judgeFileType"
                :auto-upload="false"
                :on-exceed="handleExceed"
                :multiple="false"
                :limit="1"
                accept=".xlsx, .xls">
            <el-button slot="trigger"
                       size="small"
                       type="primary">
                        <i class="el-icon-document-add"></i>
                        {{$t('common.selectFile')}}
            </el-button>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelUpload">{{$t('common.cancel')}}</el-button>
            <el-button type="primary"
                       :loading="loading"
                       @click="submitUpload">
                        {{$t('common.upload')}}
                        <i class="el-icon-upload2"></i>
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
import operationApi from '@/api/operation/operation'
import { apiDefaultErrorHandler } from '../../api/base'
import { success, warning } from '@/utils/message'
import { downloadFile } from '@/utils/index'

export default {
  props: ['type'],
  name: 'upload',
  data () {
    return {
      dialogVisible: false,
      fileList: [],
      loading: false
    }
  },
  methods: {
    /**
     * 判断文件类型
     */
    judgeFileType (file) {
      let suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (suffix !== 'xlsx' && suffix !== 'xls') {
        warning(this.$t('common.selectSpecifiedTypeFile'))
        this.fileList.splice(0, 1)
      }
    },
    submitUpload () {
      if (this.$refs.upload.uploadFiles.length > 0) {
        this.$refs.upload.submit()
      } else {
        warning(this.$t('common.pleaseSelectFile'))
      }
    },
    cancelUpload () {
      this.dialogVisible = false
      this.fileList.splice(0, 1)
    },
    downloadTemplate () {
      downloadFile(this.type, this.getFileName(this.type), 'xlsx')
    },
    uploadFile (param) {
      this.loading = true
      let fileObject = param.file
      let formData = new FormData()
      formData.append('file', fileObject)
      formData.append('type', this.type)
      operationApi.uploadData(formData).then(({ data }) => {
        if (this.$http.isResponseSuccess(data)) {
          success(this.$t('common.importSuccess'), () => {
            this.fileList.splice(0, 1)
            this.$emit('confirm')
            this.dialogVisible = false
            this.loading = false
          })
        } else {
          apiDefaultErrorHandler(data)
          this.loading = false
        }
      }).catch((ex) => {
        apiDefaultErrorHandler(ex)
        this.loading = false
      })
    },
    handleExceed (file, fileList) {
      warning(this.$t('common.unableMoreFiles'))
    },
    getFileName (type) {
      if (type === this.$appConstant.DATA_IMPORT_FILE_TYPE_DAILY) {
        return this.$t('statistic.statisticData')
      } else {
        console.error('文件类型参数错误！')
      }
    }
  }
}
</script>

<style scoped>
    .el-upload-tip {
        padding-top: 5px;
        font-size: 8px;
    }
</style>
